<html>
 <head>
   <title>Palette lite</title>
 </head>
 <body>
  <div>
    <div>
     <div style="background-color: #F44336;">
      <span>Red</span>
      <div>
       <span>500</span>
       <span>#F44336</span>
      </div>
     </div>
     <div style="background-color: #FFCDD2;">
      <div>
       <span>100</span>
       <span>#FFCDD2</span>
      </div>
     </div>
     <div style="background-color: #D32F2F;">
      <div>
       <span>700</span>
       <span>#D32F2F</span>
      </div>
     </div>
     <div style="background-color: #FF8A80;">
      <div>
       <span>A100</span>
       <span>#FF8A80</span>
      </div>
     </div>
     <div style="background-color: #FF5252;">
      <div>
       <span>A200</span>
       <span>#FF5252</span>
      </div>
     </div>
     <div style="background-color: #FF1744;">
      <div>
       <span>A400</span>
       <span>#FF1744</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #E91E63;">
      <span>Pink</span>
      <div>
       <span>500</span>
       <span>#E91E63</span>
      </div>
     </div>
     <div style="background-color: #F8BBD0;">
      <div>
       <span>100</span>
       <span>#F8BBD0</span>
      </div>
     </div>
     <div style="background-color: #C2185B;">
      <div>
       <span>700</span>
       <span>#C2185B</span>
      </div>
     </div>
     <div style="background-color: #FF80AB;">
      <div>
       <span>A100</span>
       <span>#FF80AB</span>
      </div>
     </div>
     <div style="background-color: #FF4081;">
      <div>
       <span>A200</span>
       <span>#FF4081</span>
      </div>
     </div>
     <div style="background-color: #F50057;">
      <div>
       <span>A400</span>
       <span>#F50057</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #9C27B0;">
      <span>Purple</span>
      <div>
       <span>500</span>
       <span>#9C27B0</span>
      </div>
     </div>
     <div style="background-color: #E1BEE7;">
      <div>
       <span>100</span>
       <span>#E1BEE7</span>
      </div>
     </div>
     <div style="background-color: #7B1FA2;">
      <div>
       <span>700</span>
       <span>#7B1FA2</span>
      </div>
     </div>
     <div style="background-color: #EA80FC;">
      <div>
       <span>A100</span>
       <span>#EA80FC</span>
      </div>
     </div>
     <div style="background-color: #E040FB;">
      <div>
       <span>A200</span>
       <span>#E040FB</span>
      </div>
     </div>
     <div style="background-color: #D500F9;">
      <div>
       <span>A400</span>
       <span>#D500F9</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #673AB7;">
      <span>Deep Purple</span>
      <div>
       <span>500</span>
       <span>#673AB7</span>
      </div>
     </div>
     <div style="background-color: #D1C4E9;">
      <div>
       <span>100</span>
       <span>#D1C4E9</span>
      </div>
     </div>
     <div style="background-color: #512DA8;">
      <div>
       <span>700</span>
       <span>#512DA8</span>
      </div>
     </div>
     <div style="background-color: #B388FF;">
      <div>
       <span>A100</span>
       <span>#B388FF</span>
      </div>
     </div>
     <div style="background-color: #7C4DFF;">
      <div>
       <span>A200</span>
       <span>#7C4DFF</span>
      </div>
     </div>
     <div style="background-color: #651FFF;">
      <div>
       <span>A400</span>
       <span>#651FFF</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #3F51B5;">
      <span>Indigo</span>
      <div>
       <span>500</span>
       <span>#3F51B5</span>
      </div>
     </div>
     <div style="background-color: #C5CAE9;">
      <div>
       <span>100</span>
       <span>#C5CAE9</span>
      </div>
     </div>
     <div style="background-color: #303F9F;">
      <div>
       <span>700</span>
       <span>#303F9F</span>
      </div>
     </div>
     <div style="background-color: #8C9EFF;">
      <div>
       <span>A100</span>
       <span>#8C9EFF</span>
      </div>
     </div>
     <div style="background-color: #536DFE;">
      <div>
       <span>A200</span>
       <span>#536DFE</span>
      </div>
     </div>
     <div style="background-color: #3D5AFE;">
      <div>
       <span>A400</span>
       <span>#3D5AFE</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #2196F3;">
      <span>Blue</span>
      <div>
       <span>500</span>
       <span>#2196F3</span>
      </div>
     </div>
     <div style="background-color: #BBDEFB;">
      <div>
       <span>100</span>
       <span>#BBDEFB</span>
      </div>
     </div>
     <div style="background-color: #1976D2;">
      <div>
       <span>700</span>
       <span>#1976D2</span>
      </div>
     </div>
     <div style="background-color: #82B1FF;">
      <div>
       <span>A100</span>
       <span>#82B1FF</span>
      </div>
     </div>
     <div style="background-color: #448AFF;">
      <div>
       <span>A200</span>
       <span>#448AFF</span>
      </div>
     </div>
     <div style="background-color: #2979FF;">
      <div>
       <span>A400</span>
       <span>#2979FF</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #03A9F4;">
      <span>Light Blue</span>
      <div>
       <span>500</span>
       <span>#03A9F4</span>
      </div>
     </div>
     <div style="background-color: #B3E5FC;">
      <div>
       <span>100</span>
       <span>#B3E5FC</span>
      </div>
     </div>
     <div style="background-color: #0288D1;">
      <div>
       <span>700</span>
       <span>#0288D1</span>
      </div>
     </div>
     <div style="background-color: #80D8FF;">
      <div>
       <span>A100</span>
       <span>#80D8FF</span>
      </div>
     </div>
     <div style="background-color: #40C4FF;">
      <div>
       <span>A200</span>
       <span>#40C4FF</span>
      </div>
     </div>
     <div style="background-color: #00B0FF;">
      <div>
       <span>A400</span>
       <span>#00B0FF</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #00BCD4;">
      <span>Cyan</span>
      <div>
       <span>500</span>
       <span>#00BCD4</span>
      </div>
     </div>
     <div style="background-color: #B2EBF2;">
      <div>
       <span>100</span>
       <span>#B2EBF2</span>
      </div>
     </div>
     <div style="background-color: #0097A7;">
      <div>
       <span>700</span>
       <span>#0097A7</span>
      </div>
     </div>
     <div style="background-color: #84FFFF;">
      <div>
       <span>A100</span>
       <span>#84FFFF</span>
      </div>
     </div>
     <div style="background-color: #18FFFF;">
      <div>
       <span>A200</span>
       <span>#18FFFF</span>
      </div>
     </div>
     <div style="background-color: #00E5FF;">
      <div>
       <span>A400</span>
       <span>#00E5FF</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #009688;">
      <span>Teal</span>
      <div>
       <span>500</span>
       <span>#009688</span>
      </div>
     </div>
     <div style="background-color: #B2DFDB;">
      <div>
       <span>100</span>
       <span>#B2DFDB</span>
      </div>
     </div>
     <div style="background-color: #00796B;">
      <div>
       <span>700</span>
       <span>#00796B</span>
      </div>
     </div>
     <div style="background-color: #A7FFEB;">
      <div>
       <span>A100</span>
       <span>#A7FFEB</span>
      </div>
     </div>
     <div style="background-color: #64FFDA;">
      <div>
       <span>A200</span>
       <span>#64FFDA</span>
      </div>
     </div>
     <div style="background-color: #1DE9B6;">
      <div>
       <span>A400</span>
       <span>#1DE9B6</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #4CAF50;">
      <span>Green</span>
      <div>
       <span>500</span>
       <span>#4CAF50</span>
      </div>
     </div>
     <div style="background-color: #C8E6C9;">
      <div>
       <span>100</span>
       <span>#C8E6C9</span>
      </div>
     </div>
     <div style="background-color: #388E3C;">
      <div>
       <span>700</span>
       <span>#388E3C</span>
      </div>
     </div>
     <div style="background-color: #B9F6CA;">
      <div>
       <span>A100</span>
       <span>#B9F6CA</span>
      </div>
     </div>
     <div style="background-color: #69F0AE;">
      <div>
       <span>A200</span>
       <span>#69F0AE</span>
      </div>
     </div>
     <div style="background-color: #00E676;">
      <div>
       <span>A400</span>
       <span>#00E676</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #8BC34A;">
      <span>Light Green</span>
      <div>
       <span>500</span>
       <span>#8BC34A</span>
      </div>
     </div>
     <div style="background-color: #DCEDC8;">
      <div>
       <span>100</span>
       <span>#DCEDC8</span>
      </div>
     </div>
     <div style="background-color: #689F38;">
      <div>
       <span>700</span>
       <span>#689F38</span>
      </div>
     </div>
     <div style="background-color: #CCFF90;">
      <div>
       <span>A100</span>
       <span>#CCFF90</span>
      </div>
     </div>
     <div style="background-color: #B2FF59;">
      <div>
       <span>A200</span>
       <span>#B2FF59</span>
      </div>
     </div>
     <div style="background-color: #76FF03;">
      <div>
       <span>A400</span>
       <span>#76FF03</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #CDDC39;">
      <span>Lime</span>
      <div>
       <span>500</span>
       <span>#CDDC39</span>
      </div>
     </div>
     <div style="background-color: #F0F4C3;">
      <div>
       <span>100</span>
       <span>#F0F4C3</span>
      </div>
     </div>
     <div style="background-color: #AFB42B;">
      <div>
       <span>700</span>
       <span>#AFB42B</span>
      </div>
     </div>
     <div style="background-color: #F4FF81;">
      <div>
       <span>A100</span>
       <span>#F4FF81</span>
      </div>
     </div>
     <div style="background-color: #EEFF41;">
      <div>
       <span>A200</span>
       <span>#EEFF41</span>
      </div>
     </div>
     <div style="background-color: #C6FF00;">
      <div>
       <span>A400</span>
       <span>#C6FF00</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #FFEB3B;">
      <span>Yellow</span>
      <div>
       <span>500</span>
       <span>#FFEB3B</span>
      </div>
     </div>
     <div style="background-color: #FFF9C4;">
      <div>
       <span>100</span>
       <span>#FFF9C4</span>
      </div>
     </div>
     <div style="background-color: #FBC02D;">
      <div>
       <span>700</span>
       <span>#FBC02D</span>
      </div>
     </div>
     <div style="background-color: #FFFF8D;">
      <div>
       <span>A100</span>
       <span>#FFFF8D</span>
      </div>
     </div>
     <div style="background-color: #FFFF00;">
      <div>
       <span>A200</span>
       <span>#FFFF00</span>
      </div>
     </div>
     <div style="background-color: #FFEA00;">
      <div>
       <span>A400</span>
       <span>#FFEA00</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #FFC107;">
      <span>Amber</span>
      <div>
       <span>500</span>
       <span>#FFC107</span>
      </div>
     </div>
     <div style="background-color: #FFECB3;">
      <div>
       <span>100</span>
       <span>#FFECB3</span>
      </div>
     </div>
     <div style="background-color: #FFA000;">
      <div>
       <span>700</span>
       <span>#FFA000</span>
      </div>
     </div>
     <div style="background-color: #FFE57F;">
      <div>
       <span>A100</span>
       <span>#FFE57F</span>
      </div>
     </div>
     <div style="background-color: #FFD740;">
      <div>
       <span>A200</span>
       <span>#FFD740</span>
      </div>
     </div>
     <div style="background-color: #FFC400;">
      <div>
       <span>A400</span>
       <span>#FFC400</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #FF9800;">
      <span>Orange</span>
      <div>
       <span>500</span>
       <span>#FF9800</span>
      </div>
     </div>
     <div style="background-color: #FFE0B2;">
      <div>
       <span>100</span>
       <span>#FFE0B2</span>
      </div>
     </div>
     <div style="background-color: #F57C00;">
      <div>
       <span>700</span>
       <span>#F57C00</span>
      </div>
     </div>
     <div style="background-color: #FFD180;">
      <div>
       <span>A100</span>
       <span>#FFD180</span>
      </div>
     </div>
     <div style="background-color: #FFAB40;">
      <div>
       <span>A200</span>
       <span>#FFAB40</span>
      </div>
     </div>
     <div style="background-color: #FF9100;">
      <div>
       <span>A400</span>
       <span>#FF9100</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #FF5722;">
      <span>Deep Orange</span>
      <div>
       <span>500</span>
       <span>#FF5722</span>
      </div>
     </div>
     <div style="background-color: #FFCCBC;">
      <div>
       <span>100</span>
       <span>#FFCCBC</span>
      </div>
     </div>
     <div style="background-color: #E64A19;">
      <div>
       <span>700</span>
       <span>#E64A19</span>
      </div>
     </div>
     <div style="background-color: #FF9E80;">
      <div>
       <span>A100</span>
       <span>#FF9E80</span>
      </div>
     </div>
     <div style="background-color: #FF6E40;">
      <div>
       <span>A200</span>
       <span>#FF6E40</span>
      </div>
     </div>
     <div style="background-color: #FF3D00;">
      <div>
       <span>A400</span>
       <span>#FF3D00</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #795548;">
      <span>Brown</span>
      <div>
       <span>500</span>
       <span>#795548</span>
      </div>
     </div>
     <div style="background-color: #D7CCC8;">
      <div>
       <span>100</span>
       <span>#D7CCC8</span>
      </div>
     </div>
     <div style="background-color: #A1887F;">
      <div>
       <span>300</span>
       <span>#A1887F</span>
      </div>
     </div>
     <div style="background-color: #5D4037;">
      <div>
       <span>700</span>
       <span>#5D4037</span>
      </div>
     </div>
     <div style="background-color: #3E2723;">
      <div>
       <span>900</span>
       <span>#3E2723</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #9E9E9E;">
      <span>Grey</span>
      <div>
       <span>500</span>
       <span>#9E9E9E</span>
      </div>
     </div>
     <div style="background-color: #F5F5F5;">
      <div>
       <span>100</span>
       <span>#F5F5F5</span>
      </div>
     </div>
     <div style="background-color: #E0E0E0;">
      <div>
       <span>300</span>
       <span>#E0E0E0</span>
      </div>
     </div>
     <div style="background-color: #616161;">
      <div>
       <span>700</span>
       <span>#616161</span>
      </div>
     </div>
     <div style="background-color: #212121;">
      <div>
       <span>900</span>
       <span>#212121</span>
      </div>
     </div>
    </div>
    <div>
     <div style="background-color: #607D8B;">
      <span>Blue Grey</span>
      <div>
       <span>500</span>
       <span>#607D8B</span>
      </div>
     </div>
     <div style="background-color: #CFD8DC;">
      <div>
       <span>100</span>
       <span>#CFD8DC</span>
      </div>
     </div>
     <div style="background-color: #90A4AE;">
      <div>
       <span>300</span>
       <span>#90A4AE</span>
      </div>
     </div>
     <div style="background-color: #455A64;">
      <div>
       <span>700</span>
       <span>#455A64</span>
      </div>
     </div>
     <div style="background-color: #263238;">
      <div>
       <span>900</span>
       <span>#263238</span>
      </div>
     </div>
    </div>
  </div>
 </body>
</html>